<template>
    <div class="content">
        <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editor"
            :defaultConfig="toolbarConfig"
            :mode="mode"
        />
        <Editor
            style="height: 100%; overflow-y: hidden;"
            v-model="content"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="handleCreated"
            @onChange="handleChange"
        />
    </div>
</template>

<style lang="scss" scoped>
.content {
    height: 100%;
    flex-direction: column;
}
</style>
<script>
import axios from "axios";
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import '@wangeditor/editor/dist/css/style.css'
export default {
    name: "WEditor",
    components: { Editor, Toolbar  },
    props: {
        value: {
            default: "",
        },
    },
    data() {
        return {
            content: "",
            editor: null,
            toolbarConfig: { },
            editorConfig: { placeholder: '请输入内容...' },
            mode: 'default', // or 'simple'
        };
    },
    methods: {
        // editorReady(editor) {
        //     const all = document.getElementById('uedtior').scrollHeight
        //     const toolbar = document.getElementsByClassName('edui-editor-toolbarbox')[0].scrollHeight
        //     const statusbar = document.getElementsByClassName('edui-editor-bottomContainer')[0].scrollHeight
        //     editor.setHeight(all - toolbar - statusbar)
        // },
        handleCreated(editor) {
            this.editor = Object.seal(editor)
        },
        handleChange(editor) {
        }
    },
    mounted() {
        this.content = this.value;
    },
    beforeDestroy() {
        const editor = this.editor
        if (editor == null) return
        editor.destroy() // 组件销毁时，及时销毁编辑器
    }
};
</script>
